<!-- 
  使用方法：
  ndColumns: 列数 组件根据传入的列数自动计算每列的宽度
  data: 数据源
  columns: 列配置
 -->
<template>
  <div class="w-full grid-content" :style="contentStyle">
    <div
      class="grid-item"
      :class="props.size"
      v-for="(item, index) in renderColumns"
      :key="index"
      :style="{ 'grid-column-start': `span ${item.span}` }"
    >
      <div class="label" :style="{ width: `${props.labelWidth}px` }">
        {{ item.label }}
      </div>
      <!--  -->
      <div class="content" v-if="item.type === 'file' && props.isCompare">
        <div class="compare-file-content" v-if="item.value != item.valuePre">
          <div class="pre">
            <pubUpload v-model:fieldIds="item.valuePre" disabled></pubUpload>
          </div>
          <el-divider border-style="dashed" content-position="left">
            变更前后对比
          </el-divider>
          <div class="now">
            <pubUpload v-model:fieldIds="item.value" disabled></pubUpload>
          </div>
        </div>
        <div v-else>
          <pubUpload v-model:fieldIds="item.value" disabled></pubUpload>
        </div>
      </div>

      <div
        class="content"
        v-else-if="item.type === 'file' && item.value != '--'"
      >
        <pubUpload v-model:fileIds="item.value" disabled></pubUpload>
      </div>
      <!--  -->
      <div class="content" v-else-if="item.type === 'money'">
        <div v-if="props.isCompare">
          <el-tooltip
            v-if="item.value != item.valuePre"
            class="box-item"
            effect="dark"
            placement="top-start"
          >
            <template #content>
              <span v-money="item.valuePre"></span>
            </template>
            <span class="color-red" v-money="item.value"></span>
          </el-tooltip>
          <span v-else v-money="item.value"></span>
        </div>
        <div v-else v-money="item.value"></div>
      </div>

      <div class="content" v-else-if="item.type === 'slot'">
        <slot :name="item.slotName"></slot>
      </div>
      <div class="content" v-else>
        <span v-if="props.isCompare">
          <el-tooltip
            v-if="item.value != item.valuePre"
            class="box-item"
            effect="dark"
            :content="item.valuePre"
            placement="top-start"
          >
            <span class="color-red">{{ item.value }}</span>
          </el-tooltip>
          <span v-else>{{ item.value }}</span>
        </span>
        <span v-else>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { store } from '@/pinia'
import { dictStore } from '@/pinia/modules/dict'
import { isUndefined, isNull } from 'lodash-es'
import { ref, computed, defineProps, onMounted } from 'vue'
const addApproveDialog = ref(false)
const approveDetailDialog = ref(false)
const props = defineProps({
  ndColumn: {
    type: [Number, String],
    default: 2
  },
  data: {
    type: Object,
    default: () => {}
  },
  dataPre: {
    type: Object,
    default: () => {}
  },
  columns: {
    type: Array,
    default: () => []
  },
  labelWidth: {
    type: Number,
    default: 200
  },
  size: {
    type: String,
    default: 'default'
  },
  isCompare: {
    type: Boolean,
    default: false
  }
})
const contentStyle = computed(() => {
  return {
    gridTemplateColumns: `repeat(${props.ndColumn}, 1fr)`
  }
})
const renderColumns = computed(() => {
  let arr = []
  if (props.isCompare) {
    props.columns.forEach(item => {
      arr.push({
        label: item.label,
        prop: item.prop,
        span: item.span ?? 1,
        slotName: item.slotName,
        type: item.type,
        bizType: item.bizType,
        subsetId: item.subsetId,
        value: item.prop ? formatValue(props.data[item.prop], item) : '',
        valuePre: item.prop ? formatValue(props.dataPre[item.prop], item) : '',
        isApprove: item.isApprove
      })
    })
  } else {
    props.columns.forEach(item => {
      arr.push({
        label: item.label,
        prop: item.prop,
        span: item.span ?? 1,
        slotName: item.slotName,
        type: item.type,
        bizType: item.bizType,
        subsetId: item.subsetId,
        value: item.prop ? formatValue(props.data[item.prop], item) : '',
        isApprove: item.isApprove
      })
    })
  }

  return arr
})
const currentFileIds = ref()
const currentSubsetId = ref()
const currentBizType = ref()
const dictStoreData = dictStore(store)
const formatValue = (value, item) => {
  if (isUndefined(value) || isNull(value) || value === '') {
    return '--'
  }

  if (item.type === 'dict') {
    const options = dictStoreData.dict.filter(
      item1 => item1.code == item.dictCode
    )[0]
    return options.children.filter(item2 => item2.code == value)[0]?.name
  }
  if (item.type === 'dictCheckbox') {
    const options = dictStoreData.dict.filter(
      item1 => item1.code == item.dictCode
    )[0]
    let arr = []
    value.split(',').forEach(item2 => {
      arr.push(options.children.filter(item3 => item3.code == item2)[0]?.name)
    })
    return arr.join(',')
  }
  if (item.type === 'Area') {
    return '行政区划'
  }
  return value
}

onMounted(() => {})
</script>
<style lang="scss" scoped>
.my-label {
  text-align: left;
  word-break: break-all;
}
.my-content {
  text-align: left; //文本居中
  word-break: no-wrap;
}

.grid-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  border: 1px solid rgb(235, 238, 245);
  border-bottom: none;
  // border-right: 1px solid rgb(235, 238, 245);
  .grid-item {
    font-size: 14px;
    display: flex;
    border: 1px solid rgb(235, 238, 245);
    border-right: none;
    border-top: none;
    border-left: none;
    min-height: 56px;
    line-height: 23px;
    &.mini {
      min-height: 30px;
      font-size: 12px;
    }
    .label {
      height: 100%;
      display: flex;
      width: 200px;
      align-items: center;
      background: rgb(245, 247, 250);
      padding: 8px 11px;
      color: rgb(96, 98, 102);
      box-sizing: border-box;
    }
    .content {
      flex: 1;
      padding: 8px 11px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #333;
      word-break: break-all;
      position: relative;
      // .option-btn {
      //   display: flex;
      //   align-items: center;
      //   justify-content: flex-end;
      // }
    }
  }
}
.color-red {
  color: red;
}
.compare-file-content {
  display: flex;
  flex-direction: column;
  .file-compare-label {
    padding-left: 10px;
    color: #777;
  }
  .pre {
  }
  .now {
  }
}
</style>
